<template>
    <div class="gray">
         <search></search>
        <ul>
            <li v-for="item in list" :key="item.id">
                <van-icon name="cross"  @click="del(item)"/>
                <div class="box">
                    <div class="inner">
                        <p>{{item.name}}</p>
                        <span class='more' v-if="item.is_default == 1">默认</span>
                    </div>
                    <div class="inne" @click="pass(item)">
                        <p>{{item.mobile}}</p>
                        <p>{{item.address}}</p>
                    </div>
                    <img src="@/assets/edit.png" width="25" height="25" @click="editAdress(item.id)">
                </div>
            </li>
        </ul>
        <div class="new">
            <div class="fixed" @click="newAdress">
                <p>+新建地址</p>
            </div>
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import search from "@/components/search"
import { getListAction, deleteAction } from '@/api/home/index';
export default {
    data() {
        return {
            list:[]
        };
    },
    methods: {
        init(){
            getListAction({
                openId:localStorage.getItem("openId")
            }).then(res=>{
                this.list = res.data.data
                console.log(this.list);
                localStorage.setItem("list",JSON.stringify(res.data.data))
            })
        },
        editAdress(val){
            this.$router.push({path:"/my/editAdress",query:{id:val}})
        },
        newAdress(){
            this.$router.push({path:"/my/newAdress"})
        },
        del(val){
                Dialog.confirm({
                title: '提示',
                message: '确定要删除吗?',
                })
                .then(() => {
                    deleteAction({
                        id:val.id
                    }).then(res=>{
                        this.init();
                    })
                })
                .catch(() => {
                    // on cancel
                });
        },
        pass(val){
            localStorage.setItem("item",JSON.stringify(val))
            this.$router.go(-1)
        }
    },
    created() {
        this.init();
    },
    computed: {

    },
    mounted() {

    },
    components:{
        search
    }
};
</script>

<style scoped lang="scss">
    ul{
        padding: 0 10px;
        background-color: #fff;
        li{
            position: relative;
            padding: 15px 0;
            margin-bottom:1px;
            border-bottom: 1Px solid #d9d9d9;
            ::v-deep i{
                position: absolute;
                top: 5px;
                right: 5px;
            }
            .box{
                display: flex;
                align-items: center;
                .inner{
                    display: flex;
                    width: 50px;
                    flex-direction: column;
                    transform: translateY(-5px);
                    p:first-child{
                        line-height: 18px;
                    }
                    .more{
                        z-index: 20;
                        width: .8rem;
                        height: .4rem;
                        border: 1Px solid #b4282d;
                        text-align: center;
                        line-height: .4rem;
                        color: #b4282d;
                        margin: auto;
                       
                    }
                }
                .inne{
                    width: 240px;
                    padding: 0 10px;
                    p{
                        text-align: left;
                    }
                }
            }
        }
    }
    .new{
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        z-index: 20;
        .fixed{
            margin: 15px 30px;
            border: 1px solid #b4282d;
            p{
                height: 37px;
                margin: 0;
                line-height: 37px;
                color: #b4282d;
            }
        }
    }
</style>
